<template>
  <data-table-app-page>
    <div slot="toolbar">
      <el-form inline :model="searchForm">
        <el-form-item label="工号">
          <el-input v-model="searchForm.username" clearable style="width: 120px"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="searchForm.realName" clearable style="width: 90px"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.phone" clearable style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item label="社区">
          <org-select v-model="searchForm.orgId" style="width:260px" />
        </el-form-item>
        <el-form-item>
          <data-table-query-button type="default" :query-params="searchForm" />
        </el-form-item>
      </el-form>
      <el-button
        v-if="[1,4,9,14].includes(app.admin.roleId)"
        type="primary"
        icon="el-icon-plus"
        @click="onAddClick"
      >
        增加
      </el-button>
    </div>
    <data-table
      ref="table"
      :url="`/api/communityAdminMerchant/page?communityAdminId=${$params.admin.id}`"
    >
      <el-table-column prop="username" label="工号" width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="realName" label="姓名" width="140" show-overflow-tooltip></el-table-column>
      <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
      <el-table-column>
        <template slot-scope="{row}">
          <delete-confirm-button @ok="onDeleteClick(row)" />
        </template>
      </el-table-column>
    </data-table>

    <boss-query-selector ref="bossQuerySelector" />
  </data-table-app-page>
</template>

<script>
import { Select } from 'element-ui';

export default {
  pageProps: {
    title: '商家管理'
  },
  components: {
    OrgSelect: () => ({ component: import('@/pages/org/OrgSelect.vue'), loading: Select, delay: 0 }),
    BossQuerySelector: () => import('@/pages/shop/BossQuerySelector.vue')
  },
  data() {
    return {
      searchForm: {},
      app
    }
  },
  methods: {
    onAddClick() {
      this.$refs.bossQuerySelector.show({
        onOk: async (boss) => {
          const ret = await this.$http.post('/api/communityAdminMerchant',
            {communityAdminId: this.$params.admin.id, merchantId: boss.adminId});
          if (ret.success) {
            this.$refs.table.reloadCurrentPage();
            this.$message.success(ret.message);
          }
          return true;
        }
      });
    },
    async onDeleteClick({adminId}) {
      const ret = await this.$http.delete('/api/communityAdminMerchant',
        {params: {communityAdminId: this.$params.admin.id, merchantId: adminId}});
      if (ret.success) {
        this.$refs.table.reloadCurrentPage();
        this.$message.success(ret.message);
      }
    }
  }
}
</script>